<template>
  <div class="paging">
    <ul>
      <li class="page1">上一页</li>
      <li class="page2 page">1</li>
      <li class="page2">2</li>
      <li class="page2">3</li>
      <li class="page2">4</li>
      <li class="page2">5</li>
      <li class="page2">6</li>
      <li class="page2">7</li>
      <li class="page1">下一页</li>
    </ul>
  </div>
</template>


<script>
export default {
  name: "Paging",
};
</script>


<style lang="less" scoped>
.paging {
  height: 24px;
  padding: 20px;
  line-height: 24px;
  ul {
    display: flex;
    margin: 0 auto;
    width: 30%;

    li {
      font-size: 14px;
      text-align: center;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
    }
    li:nth-child(1) {
      border-left: 1px solid #000;
    }
    li:nth-last-child(1) {
      border-right: 1px solid #000;
    }
  }
}
.page {
  background-color: #0a9c51;
  color: #fff;
}
.page1 {
  width: 6em;
}
.page2 {
  width: 24px;
  height: 24px;
}
</style>